<template>
  <div class="paypal-config gray-box top-redius border-bottom-gray">
    <div class="title">
      {{ $t('sysManagement.payPalPaymentConfiguration') }}
    </div>
    <el-form
      ref="dataFormRef"
      label-width="180px"
      class="set-form"
      label-position="left"
      :rules="dataRule"
      :model="dataForm"
      @submit.prevent
      @keyup.enter="onSubmit()"
    >
      <el-form-item
        :label="$t('sysManagement.payPalClientId')"
        style="width:640px"
        prop="clientId"
      >
        <el-input
          v-model="dataForm.clientId"
          type="textarea"
          rows="3"
          :placeholder="$t('sysManagement.payPalClientId')"
          controls-position="right"
        />
      </el-form-item>
      <el-form-item
        :label="$t('sysManagement.payPalClientSecret')"
        style="width:640px"
        prop="clientSecret"
      >
        <el-input
          v-model="dataForm.clientSecret"
          type="textarea"
          rows="3"
          :placeholder="$t('sysManagement.payPalClientSecret')"
          controls-position="right"
        />
      </el-form-item>
      <el-form-item
        :label="$t('sysManagement.mode')"
        style="width:640px"
        prop="mode"
      >
        <!--<el-input v-model="dataForm.mode" :placeholder="$t('sysManagement.modePlaceholder')" controls-position="right"></el-input>-->
        <el-select
          v-model="dataForm.mode"
          filterable
          default-first-option
          :placeholder="`${$t('sysManagement.modePlaceholder')}`"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
            {{ item.label }}
            <!--<span style="float: left">{{ item.label }}</span>-->
            <!--<span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>-->
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="receiverEmail"
        style="width:640px"
        prop="receiverEmail"
      >
        <el-input
          v-model="dataForm.receiverEmail"
          :placeholder="$t('sysManagement.receiverEmail')"
          controls-position="right"
        />
      </el-form-item>
      <el-form-item
        label="webHookId"
        style="width:640px"
        prop="webHookId"
      >
        <el-input
          v-model="dataForm.webHookId"
          :placeholder="$t('sysManagement.webHookId')"
          controls-position="right"
        >
          <template #append>
            <el-popover
              placement="right"
              width="200"
              trigger="hover"
              :content="$t('sysManagement.webHookIdTips')"
            >
              <template #reference>
                <el-icon><QuestionFilled /></el-icon>
              </template>
            </el-popover>
          </template>
        </el-input>
      </el-form-item>
    </el-form>
    <div>
      <div class="dialog-footer">
        <div
          class="default-btn"
          @click="onSubmit(dataFormRef)"
        >
          {{ $t('sysManagement.save') }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'

const emit = defineEmits(['refreshDataList'])
const dataFormRef = ref(null)
const dataForm = ref({
  clientId: null,
  clientSecret: null,
  mode: null,
  receiverEmail: null,
  webHookId: null
})
const options = [
  {
    label: 'live',
    value: 'live'
  },
  {
    label: 'sandbox',
    value: 'sandbox'
  }
]
const dataRule = {
  clientId: [
    { required: true, message: $t('sysManagement.clientIdNullTips'), trigger: 'blur' }
  ],
  clientSecret: [
    { required: true, message: $t('sysManagement.clientSecretNullTips'), trigger: 'blur' }
  ],
  mode: [
    { required: true, message: $t('sysManagement.modeNullTips'), trigger: 'blur' }
  ],
  receiverEmail: [
    { required: true, message: $t('sysManagement.receiverEmailNullTips'), trigger: 'blur' }
  ]
  // webHookId: [
  //   { required: true, message: $t('sysManagement.modeNullTips'), trigger: 'blur' }
  // ]
}
onMounted(() => {
  init()
})

const init = () => {
  nextTick(() => {
    http({
      url: http.adornUrl('/sys/pconfig/info/' + 'PAYPAL_CONFIG'),
      method: 'get',
      params: http.adornParams()
    }).then(({ data }) => {
      if (data) {
        dataForm.value = JSON.parse(data)
      }
    })
    dataFormRef.value?.resetFields()
  })
}
// 表单提交
const onSubmit = () => {
  dataFormRef.value?.validate((valid) => {
    if (valid) {
      http({
        url: http.adornUrl('/sys/pconfig/save'),
        method: 'post',
        data: http.adornData({
          paramKey: 'PAYPAL_CONFIG',
          paramValue: JSON.stringify(dataForm.value),
          remark: $t('sysManagement.payPalPaymentConfiguration')
        })
      }).then(() => {
        ElMessage({
          message: $t('publics.operation'),
          type: 'success',
          duration: 1500,
          onClose: () => {
            emit('refreshDataList')
          }
        })
      })
    }
  })
}
defineExpose({ init })
</script>
